<template>
  <div>
    <!--limit属性控制上传的数量，但是并不能隐藏上传按钮-->
    <!--action属性添加#号，防止报错-->
    <el-upload
      action="#"
      name="avatar"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="preview"
      :limit="1"
      :class="{ disabled: fileList.length === 1 }"
      :on-remove="removeFile"
      :on-change="onChangeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!--上传的进度条展示-->
    <el-progress
      v-if="showPercent"
      style="width: 180px;"
      :percentage="percent"
    />
    <el-dialog title="预览" :visible.sync="showDialog">
      <el-row type="flex" justify="center">
        <img
          width="300"
          :src="imgUrl"
          alt=""
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引入腾讯云的sdk
import COS from 'cos-js-sdk-v5'

// 需要实例化
const cos = new COS({
  SecretId: 'AKIDiFVUDfqkNjocBTVLuDG1VieIfla8QQBf',
  SecretKey: 'FDvLUN1OUJrGOFp9E3bttc4F9m7ByTih'
})
// 需求：根据fileList文件数量，控制上传按钮展示
export default {
  name: 'ImageUpload',
  data() {
    return {
      showPercent: false,
      percent: 0,
      imgUrl: '',
      showDialog: false,
      fileList: []
    }
  },
  methods: {
    // 自定义的上传方法
    upload(params) {
      // console.log(params)
      // console.log(URL.createObjectURL(params.file))
      //   开始上传
      // console.log(this.fileList)
      // console.log(params.file)
      if (params.file) {
        // 上传开始了,打开进度条
        this.showPercent = true
        // 判断是否有上传的文件
        cos.putObject({
          Bucket: 'wuxiaohui-1254415986', /* 填入您自己的存储桶，必须字段 */
          Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
          Key: params.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
          Body: params.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
          // 获取的上传的进度数据
          onProgress: ({ percent }) => {
            // 腾讯云返回的上传进度赋值给进度条组件，实现进度条的动态切换
            this.percent = +(percent * 100).toFixed(2)
          }
        }, (err, data) => {
          // 如果err为null，表示上传成功
          // 如果err有值，上传失败
          if (err) return
          // 可以获取到图片的存储的链接
          // 只要让这个this指向当前组件实例
          this.fileList.forEach(item => {
            // 遍历原来的文件列表数组，找到当前正在上传的文件，替换掉他的url
            if (item.uid === params.file.uid) {
              // 替换成真实的服务器的图片地址
              item.url = `http://${data.Location}`
              // 需要给当前项添加一个标识，表示上传已完成
              // 等会提交接口的时候，判断这个标记是否都为true
              item.upload = true
            }
          })
          // 上传成功以后关闭进度条
          // TODO: 让进度条的动画做完以后再关闭进度条
          setTimeout(() => {
            this.showPercent = false
            // 进度条的进度重置
            this.percent = 0
          }, 1000)
        })
      }
    },
    beforeUpload(file) {
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png', 'image/webp']

      // 1、判断文件类型是否符合条件
      if (!types.includes(file.type)) {
        //   不符合我们定义的图片的格式规则
        this.$message.error('图片格式不对~~')
        // 表示停止上传
        return false
      }

      // 上传文件的最大的大小,表示 5MB
      const maxSize = 5 * 1024 * 1024

      if (file.size > maxSize) {
        //   当前文件的大小，超出了最大的大小
        this.$message.error('图片太大了~')
        // 表示停止上传
        return false
      }
    },
    // 添加文件触发一次onchange
    // 上传失败(或成功)触发一次onchange
    // 总结：同一次上传可能触发多次on-change事件
    onChangeFile(file, fileList) {
      //   需求：如果图片上传成功了需要把图片添加到fileList里面去
      //   处理方案：把处理完毕最终的结果数组直接赋值给fileList
      this.fileList = fileList
    },
    // 点击移除图标的时候会触发的函数
    // file是当前点击删除的文件
    removeFile(file) {
      // 找到要删除的这项删除掉（留下的是uid不一样的）
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // on-preview什么时候触发
    preview(file) {
      // url就是图片的地址
      this.imgUrl = file.url
      // 弹出一个弹层
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss">
.disabled {
  .el-upload.el-upload--picture-card {
    display: none;
  }
}
</style>
